<template>
  <div id="home">
      <h2>首页</h2>
      <div>{{$store.state.counter}}</div>
      <button @click="addClick">+</button>
      <button @click="subClick">-</button>
      <button @click="addCount(5)">+N（N自定义）</button>
      <div><span style="color:pink">couter的平方:</span>{{$store.getters.powerCount}}</div>
      <div><span style="color:pink">年龄大于20岁的学生：</span>{{$store.getters.filterStu}}</div>
      <div><span style="color:pink">年龄大于20岁学生的长度：</span>{{$store.getters.filterStuLength}}</div>
      <div><span style="color:pink">过滤年龄大于N的学生：</span>{{$store.getters.filterS(21)}}</div>
      <button @click="addStu">添加学生</button>
      <div><span style="color:pink">Info:</span>{{$store.state.info}}</div>
      <button @click="changeInfo1">改名字</button>
      <button @click="changeInfo2">新增地址</button>
      <button @click="changeInfo3">删除年龄</button>
      <button @click="changeInfo4">异步更改名字</button>
      <h2>模块化</h2>
      <div>模块A的名字:{{$store.state.a.name}}</div>
      <div>模块A的全名:{{$store.getters.fullName}}</div>
      <div>模块A的全名:{{$store.getters.fullNameAdd}}</div>
      <div>模块A的全名:{{$store.getters.fullNameAdds}}</div>
      <button @click="changeName">修改模块A的名字</button>
      <button @click="aChangeName">异步修改模块A的名字</button>

  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        addClick(){
            this.$store.commit('increment')
        },
        subClick(){
            this.$store.commit('decrement')
        },
        addCount(count){
            // 两种提交方式
            // 方法一 传过去的是一个数据
            this.$store.commit('incrementCount',count)
            // 方法二 传过去的是一个对象
            // this.$store.commit({
            //     type:'incrementCount',
            //     count
            // })
        },
        addStu(){
            let params = {
                name:'linda',
                age:25
            }
            this.$store.commit('addStudent',params)
        },
        changeInfo1(){
            this.$store.commit('updateInfo1')
        },
        changeInfo2(){
            this.$store.commit('updateInfo2')
        },
        changeInfo3(){
            this.$store.commit('updateInfo3')
        },
        changeInfo4(){
            this.$store.dispatch('aUpdateInfo')
        },
        changeName(){
            this.$store.commit('updateName')
        },
        aChangeName(){
            this.$store.dispatch('aUpdateName')
        },
    }
}
</script>

<style>

</style>